<template>
    <div>
        <el-card class="box-card m_t_b_1vw" shadow="hover">
            <div slot="header">
                <div class="tag">值班咨询师</div>
            </div>
            <div class="onLine" v-for="item in onLine" :key="item.id">
                <el-avatar class="avatar" :src="item.pic" />
                <div class="onLine_body">
                    <p class="title">{{item.name}}</p>
                    <p class="introduction">{{item.personalInfo}}</p>
                </div>
                <div class="onLine-btn">
                    <el-button type="primary" size="small" @click="changeIsOnLine(item)">在线咨询</el-button>
                </div>
            </div>
        </el-card>
        <VueChat :visible.sync="isOnLine" />
    </div>
</template>

<script>
import VueChat from '@/components/VueChat';
export default {
    components: { VueChat },
    data() {
        return {
            isOnLine: false,
            list: [],
            onLine: [],
        };
    },
    created() {
        this.getDutys()
    },
    mounted() {},
    methods: {
        getDutys() {
            utils.post(utils.api.psychological.dutyList, {}, (res) => {
                this.onLine = res.rows
            })
        },
        changeIsOnLine(user) {
            this.$store.dispatch('chat/addMssage', user);
            this.isOnLine = true;
        },
    },
};
</script>

<style>
</style>